<template>
    <fieldset>
        <legend>产品类目</legend>
        <div class="charts" ref="container"></div>
    </fieldset>
</template>
<script setup lang="ts">
//echarts几个步骤
//1.给echarts一个容器,并且这个容器要有高度

//2.ecahrts初始化

//3.调用setOption设置选项

import * as echarts from "echarts"

import { ref, onMounted } from "vue"

let container = ref<HTMLInputElement | null>(null)

// console.log(container)

onMounted(() => {
    //echarts初始化
    let categoryCharts = echarts.init(container.value!)

    categoryCharts.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    })
})


</script>
<style scoped>
.charts {
    height: 300px;
    border: 1px solid #ccc;
}
</style>